<template>
  <a-select
    :value="value"
    :placeholder="t('请选择角色')"
    allow-clear
    :mode="multiple ? 'multiple' : undefined"
    :disabled="disabled"
    :loading="state.loading"
    @update:value="(v) => emit('update:value', v)"
  >
    <a-select-option
      v-for="item in state.list"
      :key="item.roleId"
      :value="item.roleId"
    >
      <span>{{ item.roleName }}</span>
      <span style="color: #999999; margin-left: 16px; float: right">
        {{ item.roleCode }}
      </span>
    </a-select-option>
  </a-select>
</template>
<script lang="ts" setup>
import { useI18n } from "vue-i18n";
import { queryByList } from "@/api/system/role";
import { useFetchList } from "@/hook/useFetchList";

interface Props {
  /**绑定值 */
  value: string | string[];
  /**禁用 */
  disabled?: boolean;
  /**多选 */
  multiple?: boolean;
}
defineProps<Props>();
const emit = defineEmits(["update:value"]);
const { t } = useI18n();
const { state } = useFetchList(queryByList);
</script>
